<template>
  <section class="panel">
    <!-- <header class="panel-header">
      <h2>管理面板</h2>
      <p>实时掌握生产侧关键指标</p>
    </header> -->
    <div class="tab-bar">
      <button
        v-for="tab in tabs"
        :key="tab.key"
        :class="['tab-btn', { active: tab.key === activeKey }]"
        @click="activeKey = tab.key"
      >
        {{ tab.label }}
      </button>
    </div>
    <section class="tab-content">
      <template v-if="activeTab.key === 'violation'">
        <div class="alerts">
          <article v-for="item in activeTab.list" :key="item.name" class="alert-card">
            <div class="alert-left">
              <span class="dot" :class="item.level"></span>
              <div>
                <h3>{{ item.name }}</h3>
                <p>{{ item.time }}</p>
              </div>
            </div>
            <div class="alert-right">
              <span class="count">{{ item.count }}</span>
              <span class="status">{{ item.status }}</span>
            </div>
          </article>
        </div>
      </template>
      <template v-else-if="activeTab.key === 'device'">
        <div class="device-grid">
          <div v-for="item in activeTab.list" :key="item.name" class="device-card">
            <div class="device-head">
              <span class="indicator" :class="item.state"></span>
              <strong>{{ item.name }}</strong>
            </div>
            <div class="device-body">
              <span>在线状态：<b :class="item.state">{{ item.stateText }}</b></span>
              <span>当日运行：{{ item.runtime }}h</span>
              <span>健康指数：{{ item.health }}%</span>
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="activeTab.key === 'env'">
        <div class="env-section">
          <div class="env-data">
            <div v-for="item in activeTab.list" :key="item.name" class="env-card">
              <h3>{{ item.name }}</h3>
              <p class="value">{{ item.value }}</p>
              <p class="desc">{{ item.desc }}</p>
              <span class="trend" :class="item.trend">{{ item.trendText }}</span>
            </div>
          </div>
          <BaseChart :option="activeTab.chartOption" :height="180" />
        </div>
      </template>
      <template v-else>
        <div class="stats-wrapper">
          <div class="stats-grid">
            <div v-for="item in activeTab.statBlocks" :key="item.label" class="stat-card">
              <p>{{ item.label }}</p>
              <h3>{{ item.value }}</h3>
              <span>{{ item.sub }}</span>
            </div>
          </div>
          <BaseChart :option="activeTab.chartOption" :height="180" />
        </div>
      </template>
    </section>
  </section>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import BaseChart from './BaseChart.vue'

const tabs = reactive([
  {
    key: 'violation',
    label: '违章告警',
    list: [
      { name: 'B04红线告警', time: '最近：15:20', status: '巡检确认中', count: 1, level: 'high' },
      { name: 'C07闸门未闭合', time: '最近：14:58', status: '已派单', count: 2, level: 'medium' },
      { name: '堆放场防护服缺失', time: '最近：13:40', status: '处理中', count: 1, level: 'medium' },
      { name: '动火作业未审批', time: '最近：12:10', status: '已取证', count: 1, level: 'critical' }
    ]
  },
  {
    key: 'device',
    label: '关键设备',
    list: [
      { name: '行车系统', state: 'online', stateText: '运行中', runtime: 6.2, health: 93 },
      { name: '拆装架', state: 'online', stateText: '运行中', runtime: 4.1, health: 97 },
      { name: '大型水泵', state: 'offline', stateText: '待命', runtime: 0.8, health: 89 },
      { name: '烤箱', state: 'warning', stateText: '保养提醒', runtime: 2.4, health: 76 },
      { name: '监控设备', state: 'online', stateText: '正常', runtime: 12, health: 99 },
      { name: '物联传感器', state: 'online', stateText: '在线45 / 48', runtime: 24, health: 94 }
    ]
  },
  {
    key: 'env',
    label: '环境监测',
    list: [
      { name: '放射源剂量率', value: '0.13 μSv/h', desc: '低于阈值 24%', trend: 'stable', trendText: '稳定' },
      { name: '车间环境温度', value: '25.4 ℃', desc: '较昨日 +1.2℃', trend: 'up', trendText: '轻微上升' },
      { name: 'TVOC气体', value: '0.42 mg/m³', desc: '工业限值 3%', trend: 'up', trendText: '需关注' },
      { name: '粉尘指数', value: '0.18 mg/m³', desc: '低于警戒线 52%', trend: 'down', trendText: '下降' }
    ],
    chartOption: {
      grid: { top: 30, left: 40, right: 18, bottom: 30 },
      tooltip: { trigger: 'axis' },
      legend: { data: ['TVOC', '温度', '湿度'], textStyle: { color: '#9ddcff' } },
      xAxis: {
        type: 'category',
        data: ['08:00', '10:00', '12:00', '14:00', '16:00'],
        axisLine: { lineStyle: { color: '#0a5f8f' } },
        axisLabel: { color: '#8bc9ff' }
      },
      yAxis: [
        {
          type: 'value',
          name: 'TVOC',
          axisLine: { lineStyle: { color: '#0a5f8f' } },
          axisLabel: { color: '#8bc9ff' },
          splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } }
        },
        {
          type: 'value',
          name: '温度',
          axisLine: { lineStyle: { color: '#0a5f8f' } },
          axisLabel: { color: '#8bc9ff' },
          splitLine: { show: false }
        }
      ],
      series: [
        {
          name: 'TVOC',
          type: 'line',
          smooth: true,
          data: [0.33, 0.36, 0.42, 0.43, 0.41],
          lineStyle: { color: '#3ce6ff' }
        },
        {
          name: '温度',
          type: 'line',
          yAxisIndex: 1,
          smooth: true,
          data: [23, 24, 25, 26, 25.2],
          lineStyle: { color: '#ffc857' }
        },
        {
          name: '湿度',
          type: 'bar',
          barWidth: 10,
          data: [60, 58, 57, 55, 56],
          itemStyle: {
            color: 'rgba(0, 217, 255, 0.45)'
          }
        }
      ]
    }
  },
  {
    key: 'stats',
    label: '数据统计',
    statBlocks: [
      { label: 'B04作业人数', value: '54', sub: '较昨日 +5 人' },
      { label: 'C07作业人数', value: '38', sub: '较昨日 +2 人' },
      { label: '堆放场当前人数', value: '12', sub: '较昨日 -4 人' },
      { label: '动火作业', value: '3', sub: '冷工作业 5' }
    ],
    chartOption: {
      tooltip: { trigger: 'axis' },
      grid: { top: 35, left: 40, right: 20, bottom: 20 },
      xAxis: {
        type: 'category',
        data: ['B04', 'C07', '堆放场', '动火', '冷工'],
        axisLabel: { color: '#98d9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#98d9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } },
        splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } }
      },
      series: [
        {
          type: 'bar',
          data: [54, 38, 12, 3, 5],
          barWidth: 18,
          itemStyle: {
            color: '#29c7ff',
            borderRadius: [6, 6, 0, 0]
          }
        }
      ]
    }
  }
])

const activeKey = ref(tabs[0].key)

const activeTab = computed(() => tabs.find(tab => tab.key === activeKey.value) ?? tabs[0])
</script>

<style scoped>
.panel {
  display: flex;
  height: 100%;
  padding: 18px 10px 18px 0;
  border: 1px solid rgba(19, 132, 205, 0.4);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(3, 31, 58, 0.85), rgba(1, 19, 32, 0.95));
  box-shadow: inset 0 0 36px rgba(0, 162, 255, 0.18);
}

.panel-header h2 {
  margin: 0;
  font-size: 20px;
  color: #e4f6ff;
}

.panel-header p {
  margin: 6px 0 14px;
  color: rgba(160, 218, 255, 0.65);
  font-size: 12px;
}

.tab-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-right: 6px;
  /* justify-content: center; */
}

.tab-btn {
  width: 30px;
  height: auto;
  min-height: 60px;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid rgba(31, 171, 255, 0.4);
  background: rgba(11, 48, 83, 0.6);
  color: rgba(160, 218, 255, 0.75);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-btn.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(45, 198, 255, 0.85), rgba(17, 95, 255, 0.85));
  box-shadow: 0 0 16px rgba(32, 173, 255, 0.45);
}

.tab-content {
  flex: 1;
  /* margin-top: 16px; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.alerts {
  display: grid;
  gap: 12px;
}

.alert-card {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(5, 53, 87, 0.7);
  border: 1px solid rgba(36, 178, 255, 0.3);
}

.alert-left {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #d4efff;
}

.alert-left h3 {
  margin: 0;
  font-size: 15px;
}

.alert-left p {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(148, 206, 255, 0.7);
}

.alert-right {
  display: grid;
  justify-items: end;
  color: #fefefe;
}

.alert-right .count {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.alert-right .status {
  font-size: 12px;
  color: rgba(184, 229, 255, 0.7);
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(47, 198, 255, 0.6);
}

.dot.high {
  background: #ffd166;
}

.dot.medium {
  background: #3dc1ff;
}

.dot.critical {
  background: #ff5f6d;
}

.device-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

.device-card {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(40, 180, 255, 0.25);
  background: rgba(5, 44, 76, 0.68);
  color: #d6f1ff;
  display: grid;
  gap: 8px;
}

.device-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.indicator.online {
  background: #24ffc2;
  box-shadow: 0 0 12px rgba(44, 255, 195, 0.6);
}

.indicator.offline {
  background: #5f7a95;
}

.indicator.warning {
  background: #ff9f43;
  box-shadow: 0 0 12px rgba(255, 159, 67, 0.6);
}

.device-body {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: rgba(182, 220, 255, 0.8);
}

.device-body b.online {
  color: #35ffb4;
}

.device-body b.warning {
  color: #ffc857;
}

.env-section {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
}

.env-data {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.env-card {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(38, 173, 255, 0.25);
  background: rgba(3, 40, 69, 0.72);
  color: #d4ecff;
  position: relative;
}

.env-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.env-card .value {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.env-card .desc {
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(155, 212, 255, 0.7);
}

.trend {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(10, 88, 140, 0.45);
  font-size: 12px;
}

.trend.up {
  color: #ffcd63;
}

.trend.down {
  color: #2ef7d6;
}

.trend.stable {
  color: #8cd7ff;
}

.stats-wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat-card {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(28, 165, 255, 0.28);
  background: rgba(4, 42, 73, 0.68);
  color: #d8f1ff;
}

.stat-card p {
  margin: 0;
  font-size: 13px;
  color: rgba(161, 214, 255, 0.75);
}

.stat-card h3 {
  margin: 10px 0 4px;
  font-size: 22px;
  color: #4ce6ff;
}

.stat-card span {
  font-size: 12px;
  color: rgba(152, 213, 255, 0.7);
}
</style>

